<template>
    <div class="content">
        <van-nav-bar title="吐槽" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="pic">
            <van-uploader v-model="fileList" preview-size="5rem" result-type="file" multiple />
        </div>
        <div class="text">
            <van-cell-group inset>
                <van-field v-model="message" rows="2" autosize label="吐槽" type="textarea" maxlength="150"
                    placeholder="请输入留言" show-word-limit />
            </van-cell-group>
        </div>
        <van-button type="primary" block style="margin-top:2rem;margin-bottom: 3.5rem;" @click="submit">提交</van-button>
        <van-overlay :show="hasSubmit" @click="overlayshow = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    {{ tips }}
                </div>
            </div>
        </van-overlay>
    </div>
</template>
  
<script  setup>
import { ref } from 'vue';
import { uploadFile } from "@/utils/upload";
import { ImgUrl } from '@/constant';

const onClickLeft = () => history.back();
const message = ref('')
const hasSubmitUrl = ref([])
const hasSubmit = ref(false)
const fileList = ref([]);
const router = useRouter();
const tips = ref('正在提交中...')
const userInfoCookie = useCookie('userInfo')
const submit = () => {
    if (message.value || hasSubmitUrl.value.length) {
        hasSubmit.value = true
        fileList.value.forEach(item => {
            setTimeout(() => {
                uploadImage(item.file)
            }, 50);
        })
        setTimeout(async () => {
            let form = {
                mes: message.value,
                imgarray: hasSubmitUrl.value,
                uid: userInfoCookie.value.uid
            }
            const { data } =await  myUseFetch('/feedback', { method: 'post', body: form })
            let res = data.value
            if (res.code == -1) {
                console.log(res)
            } else if (res.code == 0) {
                tips.value = '提交成功 √'
                setTimeout(() => {
                    router.push('/user')
                }, 1500);
            }
        }, 1500)
    }
}
function uploadImage(files) {
    console.log(files)
    uploadFile(files).subscribe({
        next: (result) => {
          console.log(result)
        },
        error: (err) => {
            console.log(err)
        },
        complete: (e) => {
            hasSubmitUrl.value.push(ImgUrl + e.key)
        },
    });
}
</script>
  
<style scoped lang="scss">
.content {
    height: 100%;
    background-color: rgb(240, 236, 236);


    .pic {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .block {
            // width: 120px;
            // height: 120px;
            // background-color: #fff;
            color: #fff;
        }
    }
}
</style>